<style>

    .assets-table-sm-item {
        background: #fff;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
        border-radius: 2px;
        border: 1px solid #e9ebf2;
        margin-bottom: 16px;
        margin-top: 16px;
    }

    .assets-table-sm-item .assets-table-sm-con {
        padding: 16px;
    }

    .assets-table-common .assets-num {
        font-size: 16px;
        font-weight: 500;
        color: #3f475a;
        line-height: 20px;
    }

    .assets-table-common .assets-valuation {
        font-size: 12px;
        font-weight: 400;
        color: #7b8293;
        line-height: 16px;
    }

    .assets-table-con-item .assets-table-con-title {
        font-size: 10px;
        font-weight: 500;
        color: #7b8293;
        line-height: 16px;
    }

    .assets-table-con-item .assets-table-con-flex {
        width: 50%;
    }

    .assets-table-sm-item .assets-table-sm-title div {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
    }

    .assets-table-con-item {
        display: -ms-flexbox;
        display: flex;
        /*margin-top: 16px;*/
    }

    .assets-render-allocation .assets-render-num {
        width: 64px;
        font-size: 16px;
        font-weight: 400;
        color: #3f475a;
        line-height: 20px;
    }

    .assets-table-sm-item .assets-table-sm-title {
        height: 48px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background-color: #f7f9fc;
        padding: 0 15px;
        border-bottom: 1px solid #e9ebf2;
    }

    .assets-table-sm-item .assets-table-sm-title div .assets-currency-name {
        font-size: 14px;
        font-weight: 500;
        color: #3f475a;
        margin-left: 8px;
    }

    .assets-table-sm-item .assets-table-sm-title div .assets-currency-full {
        font-size: 12px;
        color: #7b8293;
        margin-left: 4px;
    }

    .uc-table .t-row .cell:nth-child(1):before {
        content: '您的钱包：';
    }

    .uc-table .t-row .cell:nth-child(2):before {
        content: '手机号码：';
    }

    .square_gia {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding: .2344rem 0;
        background: #ebf1fe !important;
    }

    .repo-item {
        width: 25%;
        text-align: center;
    }

    .repo-item h1 {
        margin: 0;
        color: white;
        font-weight: 400;
        font-size: 18px;
    }

    .repo-item .name {
        font-size: 10px;
        color: #c4c7d0;
    }
</style>

<template>
    <div id="app" v-loading="loading">
        <bread-crumb>数据推广</bread-crumb>

        <div class="assets-table-sm-item">
            <div class="assets-table-sm-title">
                <div class="assets-dialog-title">
                    <img src="../../../../public/images/icon_XG.png" width="24" height="24"> <span
                        class="assets-currency-name"></span><span
                        class="assets-currency-full">(总)</span></div>
            </div>
        </div>

        <div class="uc-body">

            <div class="uc-table">
                <div class="t-row td" v-cloak="">
                    <div class="cell">
                        <el-input size="medium" disabled v-model="walletBinding.walletAddress" placeholder="您的钱包地址"
                                  style="width:70%"></el-input>
                    </div>
                    <div class="cell">
                        <el-input size="medium" v-model="walletBinding.phoneNumber" placeholder="请输入手机号码"
                                  style="width:70%;margin-top:10px;"></el-input>
                    </div>
                    <div class="cell">
                        <el-button type="primary" size="small" @click="walletBindingAdd()" style="margin-top:10px;">绑定
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {mixins} from '@/mixins/mixins'
    import breadCrumb from '../components/breadCrumb.vue'
    import {userLogsPhone, walletBindingIdentity} from "../../../axios/api";

    const LOGIN_TIMERLIMIT = 2000 //登录状态实时检测间隔
    import {mapState, mapGetters} from 'vuex'

    // 加载数据
    export default {
        name: "spread",
        components: {breadCrumb},
        mixins: [mixins],
        data() {
            return {
                loading: false,
                walletBinding: {
                    walletAddress: "",
                    phoneNumber: "",
                    act: 'walletBindingIdentity'
                }
            }
        },
        computed: {
            ...mapState(['tornlinkToken', 'xg']),//映射普通数据
            ...mapGetters(['isLogin'])// 映射计算数据
        },
        // 加载完毕后执行
        mounted() {
            this.walletBinding.walletAddress = localStorage.getItem('sender')
            this.userLogsPhone();
        },
        created() {

        },
        methods: {
            walletBindingAdd: function () {
                let that = this;
                if (this.walletBinding.phoneNumber.length < 11) {
                    this.$message.error('请输入正确的手机号');
                    return;
                }

                this.$notify({title: '提示', message: '请求中，请等待...', type: 'warning', duration: 2000})
                let param = JSON.parse(JSON.stringify(this.walletBinding));
                walletBindingIdentity(param).then(result => {
                    console.log('result', result.data)
                    that.$message({
                        message: result.resultMsg,
                        type: 'success'
                    });
                    that.userLogsPhone();
                });
            },

            userLogsPhone: function () {
                let that = this;
                let param = JSON.parse(JSON.stringify({
                    act: 'userLogsPhone',
                    userAddress: localStorage.getItem('sender')
                }));
                userLogsPhone(param).then(result => {
                    console.log('result', result);
                    that.walletBinding.phoneNumber = result.data.phone;
                });

            },
            // 参数转换URL
            parameterConversionURL(str) {
                // 参数转换url形式
                let parse = JSON.parse(JSON.stringify(str));
                var params = Object.keys(str).map(function (key) {
                    return encodeURIComponent(key) + "=" + encodeURIComponent(parse[key])
                }).join("&");
                return params;
            },
        },
        watch: {}
    }


</script>

<style lang="less" scoped>

    /*公共变量*/
    @import '~@/assets/global.less';

    /*排序与筛选*/
    .control {
        display: flex;
        justify-content: space-between;

    }

    /*用户中心表格*/
    .uc-table {
        color: #7f8eab;
        margin-top: 0px;
    }

    .uc-table .th, .uc-table .td { /*统一设置*/
        font-size: 14px;
        padding: 10px;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .uc-table .th {
        font-size: 14px;
        font-weight: bold;
    }

    .uc-table .th .cell {
    }

    .uc-table .td {
    }

    .uc-table .td .cell {
    }

    .uc-table .t-row .cell {
    }

    .uc-table .t-row .cell:nth-child(1) {
        flex: 5
    }

    .uc-table .t-row .cell:nth-child(2) {
        flex: 2
    }

    .uc-table .t-row .cell:nth-child(3) {
        flex: 2
    }

    .uc-table .t-row .cell:nth-child(4) {
        flex: 1
    }

    /**********************适应************************/
    @media screen and (max-width: @MINSCREEN) {

        /*排序与筛选*/
        .control {
            display: block;

        .control {
        }

        .order {
            margin-top: 5px;
        }
    }

    .uc-table .th {
        display: none !important;
    }

    .uc-table .t-row {
        display: block;
        padding: 10px 0px;
    }

    .uc-table .t-row .cell {
        width: 100% !important;
        font-size: 14px;
    }

    }
</style>